<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>志愿者平台 - 权益明账通</title>
    <style>
        /* 全局样式 - 与首页保持一致 */
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f7fa;
            color: #333;
        }

        /* 导航菜单 */
        .main-nav {
            background-color: #1976d2;
            padding: 1rem;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .main-nav ul {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            justify-content: center;
        }

        .main-nav li {
            margin: 0 1rem;
        }

        .main-nav a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .main-nav a:hover {
            background-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        .main-nav .active a {
            background-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        /* 主容器 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

        /* 页面标题 */
        .page-title {
            text-align: center;
            margin-bottom: 2rem;
        }

        .page-title h1 {
            font-size: 2.5rem;
            color: #1976d2;
            margin-bottom: 0.5rem;
        }

        .page-title p {
            font-size: 1.1rem;
            color: #666;
        }

        /* 新增志愿者表单 */
        .add-form {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
        }

        .form-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .form-header h2 {
            margin: 0;
            color: #1976d2;
        }

        .toggle-btn {
            background: #1976d2;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .toggle-btn:hover {
            background: #1565c0;
        }

        .form-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #555;
        }

        .form-group input {
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }

        .form-actions {
            grid-column: 1 / -1;
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
            margin-top: 1rem;
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s;
        }

        .btn-primary {
            background: #1976d2;
            color: white;
        }

        .btn-primary:hover {
            background: #1565c0;
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background: #545b62;
        }

        /* 志愿者表格 */
        .volunteer-table {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        th {
            background: #f8f9fa;
            font-weight: 600;
            color: #1976d2;
        }

        tbody tr:hover {
            background: #f8f9fa;
        }

        .loading {
            text-align: center;
            padding: 2rem;
            color: #666;
        }

        .error {
            background: #f8d7da;
            color: #721c24;
            padding: 1rem;
            border-radius: 4px;
            margin: 1rem 0;
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }
            
            .main-nav ul {
                flex-wrap: wrap;
            }
            
            .main-nav li {
                margin: 0.5rem;
            }
            
            .form-content {
                grid-template-columns: 1fr;
            }
            
            table {
                display: block;
                overflow-x: auto;
            }
        }
    </style>
</head>
<body>
    <!-- 导航菜单 -->
    <nav class="main-nav">
        <ul>
            <li><a href="./index.html">首页</a></li>
            <li><a href="./calculator.html">智能计算</a></li>
            <li class="active"><a href="./volunteer.html">志愿者平台</a></li>
            <li><a href="./AIassistant.html">全能智慧助手</a></li>
        </ul>
    </nav>

    <!-- 主内容区 -->
    <div class="container">
        <!-- 页面标题 -->
        <div class="page-title">
            <h1><a href="./colorEgg2.html" style="color: inherit; text-decoration: none; cursor: pointer;">志愿者平台</a></h1>
            <p><a href="./colorEgg2.html">不要怕！</a>寻找专业的志愿者，获得消费维权帮助</p>
        </div>

        <!-- 新增志愿者表单 -->
        <div class="add-form">
            <div class="form-header">
                <h2>成为志愿者</h2>
                <button class="toggle-btn" onclick="toggleForm()">折叠表单</button>
            </div>
            <div class="form-content" id="formContent">
                <div class="form-group">
                    <label for="name">姓名 *</label>
                    <input type="text" id="name" placeholder="请输入志愿者姓名">
                </div>
                <div class="form-group">
                    <label for="profession">擅长领域</label>
                    <input type="text" id="profession" placeholder="请输入擅长领域">
                </div>
                <div class="form-group">
                    <label for="connect_email">联系邮箱 *</label>
                    <input type="email" id="connect_email" placeholder="请输入邮箱地址">
                </div>
                <div class="form-group">
                    <label for="connect_phone">联系电话 *</label>
                    <input type="tel" id="connect_phone" placeholder="请输入手机号码">
                </div>
                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" onclick="resetForm()">重置</button>
                    <button type="button" class="btn btn-primary" onclick="addVolunteer()">提交</button>
                </div>
            </div>
        </div>

        <!-- 志愿者表格 -->
        <div class="volunteer-table">
            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>擅长领域</th>
                        <th>联系邮箱</th>
                        <th>联系电话</th>
                        <th>注册日期</th>
                    </tr>
                </thead>
                <tbody id="volunteerTableBody">
                    <tr>
                        <td colspan="5" class="loading">正在加载志愿者数据...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script>
        // API配置 - 根据你的实际后端接口修改
        const API_BASE_URL = '/api';
        const VOLUNTEERS_API = {
            list: `${API_BASE_URL}/volunteers`,
            add: `${API_BASE_URL}/volunteers`
        };

        // 页面加载完成后获取志愿者列表
        document.addEventListener('DOMContentLoaded', function() {
            loadVolunteers();
            setupNavigation();
        });

        // 加载志愿者列表
        async function loadVolunteers() {
            try {
                console.log('正在请求:', VOLUNTEERS_API.list);
                const response = await fetch(VOLUNTEERS_API.list);
                const result = await response.json();
                
                console.log('后端返回数据:', result);
                
                if (result.code === 200) {
                    // 修正：直接使用 result.data 而不是 result.data.list
                    displayVolunteers(result.data || []);
                } else {
                    showError('加载志愿者数据失败: ' + (result.msg || result.message));
                }
            } catch (error) {
                console.error('请求错误:', error);
                showError('网络错误: ' + error.message);
            }
        }

        // 显示志愿者列表
        function displayVolunteers(volunteers) {
            const tbody = document.getElementById('volunteerTableBody');
            console.log('要显示的志愿者数据:', volunteers);
            
            if (!volunteers || volunteers.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" style="text-align: center; color: #666;">暂无志愿者数据</td></tr>';
                return;
            }

            tbody.innerHTML = volunteers.map(volunteer => `
                <tr>
                    <td>${volunteer.name || '-'}</td>
                    <td>${volunteer.profession || '-'}</td>
                    <td>${volunteer.connect_email || '-'}</td>
                    <td>${volunteer.connect_phone || '-'}</td>
                    <td>${volunteer.register_date || '-'}</td>
                </tr>
            `).join('');
        }

        // 添加志愿者
        async function addVolunteer() {
            const volunteerData = {
                name: document.getElementById('name').value.trim(),
                profession: document.getElementById('profession').value.trim(),
                connect_email: document.getElementById('connect_email').value.trim(),
                connect_phone: document.getElementById('connect_phone').value.trim()
            };

            // 简单验证
            if (!volunteerData.name) {
                alert('请输入姓名');
                return;
            }
            if (!volunteerData.connect_email) {
                alert('请输入邮箱');
                return;
            }
            if (!volunteerData.connect_phone) {
                alert('请输入联系电话');
                return;
            }

            try {
                const response = await fetch(VOLUNTEERS_API.add, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(volunteerData)
                });

                const result = await response.json();
                console.log('添加志愿者返回:', result);

                // 修正：检查 msg 字段而不是 message
                if (result.code === 200) {
                    alert('志愿者添加成功！');
                    resetForm();
                    loadVolunteers(); // 自动刷新列表
                } else {
                    alert('添加失败: ' + (result.msg || result.message));
                }
            } catch (error) {
                console.error('添加志愿者错误:', error);
                alert('网络错误: ' + error.message);
            }
        }

        // 重置表单
        function resetForm() {
            document.getElementById('name').value = '';
            document.getElementById('profession').value = '';
            document.getElementById('connect_email').value = '';
            document.getElementById('connect_phone').value = '';
        }

        // 切换表单显示/隐藏
        function toggleForm() {
            const formContent = document.getElementById('formContent');
            const toggleBtn = document.querySelector('.toggle-btn');
            
            if (formContent.style.display === 'none') {
                formContent.style.display = 'grid';
                toggleBtn.textContent = '折叠表单';
            } else {
                formContent.style.display = 'none';
                toggleBtn.textContent = '展开表单';
            }
        }

        // 显示错误信息
        function showError(message) {
            const tbody = document.getElementById('volunteerTableBody');
            tbody.innerHTML = `<tr><td colspan="5" class="error">${message}</td></tr>`;
        }

        // 设置导航高亮
        function setupNavigation() {
            const navItems = document.querySelectorAll('.main-nav li');
            navItems.forEach(item => {
                item.addEventListener('click', function() {
                    navItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        }
    </script>
    <!-- 页脚版权信息 -->
    <footer style="text-align: center; padding: 2rem; background-color: #f0f0f0; color: #666; font-size: 0.9rem;">
        <p>曹惠宁 杜梓沫 杨雨昔 刘晓雨 宋金乔 张墨涵 李雨桐 作品 © 2025</p>
        <p>黑河学院经济管理学院、文化旅游学院、计算机与信息工程学院 软件项目开发社团 版权所有</p>
    </footer>
</body>
</html>